<template>
  <div>
    <el-card>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="实验室类型">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option
              v-for="(item, index) in dependencyList.experitypes"
              :key="index"
              :label="item.name"
              :value="item.id"
            >{{item.name}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排课名称" style="width: 300px">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="排课规则">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option
              v-for="(item, index) in dependencyList.experitypes"
              :key="index"
              :label="item.name"
              :value="item.id"
            >{{item.name}}</el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>课程时间预览</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="assignExperi">关联实验信息</el-button>
        </div>
        <el-table :data="courseTableData" style="width: 100%">
          <el-table-column type="index" width="150"></el-table-column>
          <el-table-column prop="weekNum" label="第几周" width="180"></el-table-column>
          <el-table-column prop="weekDay" label="星期几" width="180"></el-table-column>
          <el-table-column label="课时">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">
                {{ dependencyList.timeSlots[scope.row.timeSlot].timeSlotName }}
                ({{ dependencyList.timeSlots[scope.row.timeSlot].startTime }} —— {{ dependencyList.timeSlots[scope.row.timeSlot].endTime }})
              </span>
            </template>
          </el-table-column>
          <el-table-column label="关联实验" width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.experi }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <div>
        <div class="card" v-for="(item, index) in dependencyList.labs" :key="index">
          <div class="img">
            <img :src="plan_img">
          </div>
          <div class="context">
            <div class="card-address">
              <span>{{item.name}}</span>
            </div>
            <div class="card-population">
              <div class="card-population-total">
                <span>可容纳人数</span>
                <span class="card-population-number">{{item.maxNumber}}</span>
              </div>
              <div class="card-population-had">
                <el-popover placement="right" width="700" trigger="click">
                  <div class="block">
                    <span class="demonstration">院系班级筛选</span>
                    <el-cascader
                      :options="department"
                      v-model="selectedOptions"
                      @change="handleChange"
                    ></el-cascader>
                  </div>
                  <el-table
                    :data="students"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="sdudentSelectionChange"
                  >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column width="150" property="id" label="日期"></el-table-column>
                    <el-table-column width="100" property="name" label="姓名"></el-table-column>
                    <el-table-column width="300" property="roleName" label="地址"></el-table-column>
                  </el-table>
                  <div style="margin-top: 20px">
                    <el-button type="primary" @change="confirmStudents">确定选择</el-button>
                    <el-button @click="toggleSelection()">取消选择</el-button>
                  </div>
                  <span slot="reference" style="cursor: pointer">
                    <span>已安排学生</span>
                    <span class="card-population-number">0</span>
                  </span>
                </el-popover>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 实验选择 -->
    <el-dialog title="实验选择" width="890px" :visible.sync="experiTableVisible.visible">
      <el-alert
        :title="courseTableData.length + '节课，可以选择' + courseTableData.length + '个实验'"
        type="warning"
      ></el-alert>
      <el-table
        ref="multipleTable"
        :data="experiTableVisible.data"
        tooltip-effect="dark"
        style="width: 780px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="编号" width="120">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column prop="name" label="实验名称" width="120"></el-table-column>
        <el-table-column prop="description" label="描述" width="220" show-overflow-tooltip></el-table-column>
        <el-table-column label="排序" width="230">
          <template slot-scope="scope">
            <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button type="primary" @click="confirmAssignExperi">选中</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import plan_img from '@/assets/img/plan_img.png'

export default {
  components: {},
  created() {
    this.getWeekCount()
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    'form.ruleType': function(newVal, oldVal) {
      if (newVal === 3) {
        this.form.weekDays = [0, 1, 2, 3, 4, 5, 6]
      } else {
        if (
          (newVal === 1 && this.form.startWeek % 2 === 0) ||
          (newVal === 2 && this.form.startWeek % 2 !== 0)
        ) {
          alert('请先调整起始周')
          this.form.ruleType = oldVal
        }
        this.form.weekDays = []
      }
    },
    'form.region': function(newVal, oldVal) {
      request.get(`items/lab/labs?experitypeId=${newVal}`).then(res => {
        this.dependencyList.labs = res.content
      })
    }
  },
  data() {
    return {
      num: 1,
      dependencyList: {
        weekDays: [
          '星期一',
          '星期二',
          '星期三',
          '星期四',
          '星期五',
          '星期六',
          '星期日'
        ],
        ruleTypes: ['每周上课', '单周上课', '双周上课', '整周上课'],
        timeSlots: [],
        experitypes: [],
        labs: []
      },
      experiTableVisible: {
        visible: false,
        data: [],
        multipleSelection: []
      },
      form: {
        weekDays: [],
        weeks: [],
        ruleType: 0,
        startWeek: 1,
        weekCount: 1,
        timeSlots: [],

        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      tableData3: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      multipleSelection: [],
      plan_img,
      department: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                },
                {
                  value: 'xiaolv',
                  label: '效率'
                },
                {
                  value: 'kekong',
                  label: '可控'
                }
              ]
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  label: '侧向导航'
                },
                {
                  value: 'dingbudaohang',
                  label: '顶部导航'
                }
              ]
            }
          ]
        }
      ],
      students: []
    }
  },
  computed: {
    // 计算选择有哪些周
    courseTableData: {
      get: function() {
        const tableList = []
        // 如果单双周课，那么步长为2
        let stepCount = 1
        if (this.form.ruleType === 2 || this.form.ruleType === 1) {
          stepCount = 2
        }
        // 从第几周开始
        let weekNumberTemp = this.form.startWeek
        // 根据从第几周开始、有几周：把要安排的周存下来；
        var weeks = []
        // debugger
        for (let i = 0; i < this.form.weekCount; i++) {
          // 把合法的第几周这个值放入数组
          weeks.push(weekNumberTemp)
          this.form.weekDays.forEach(weekDay => {
            this.form.timeSlots.forEach(timeSlot => {
              tableList.push({
                weekNum: weekNumberTemp,
                weekDay: this.dependencyList.weekDays[weekDay],
                timeSlot: timeSlot
              })
            })
          })
          weekNumberTemp += stepCount

          if (weekNumberTemp > 18) {
            alert('周数不够，请调整规则')
            return tableList
          }
        }
        return tableList
      },
      set: function(newValue) {
        return newValue
      }
    }
  },
  mounted() {
    // 时间段列表
    request.get('/items/labTimerSlot').then(res => {
      this.dependencyList.timeSlots = res.content
    })
    request.get('/labs/experitype/page').then(res => {
      this.dependencyList.experitypes = res.content.records
    })
    request.get('ac/userManage/userList').then(res => {
      this.students = res.content.records
    })
    request.get('items/labExperiment/page?size=50').then(res => {
      this.experiTableVisible.data = res.content.records
    })
  },
  methods: {
    assignExperi() {
      this.experiTableVisible.visible = true
    },
    handleSelectionChange(val) {
      if (val.length > this.courseTableData.length) {
        alert('已超过所定课时数')
        return
      }
      this.experiTableVisible.multipleSelection = val
    },
    confirmAssignExperi(val) {
      const courseTableData = this.courseTableData
      courseTableData.forEach((element, index) => {
        this.courseTableData[
          index
        ].experi = this.experiTableVisible.multipleSelection[index].name
      })
      this.courseTableData = courseTableData
    },
    getWeekCount() {},
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    sdudentSelectionChange(val) {
      // this.multipleSelection = val
    }
  }
}
</script>
</script>

<style scoped>
.card {
  width: 265px;
  height: 138px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(233, 233, 233, 1);
  border-radius: 2px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  text-align: left;
  line-height: 22px;
  float: left;
}
.img {
  width: 24px;
  width: 24px;
  margin-left: 30px;
  margin-top: 20px;
  float: left;
}
.img img {
  width: 24px;
  height: 24px;
}
.context {
  float: left;
  margin-left: 30px;
}
.card-address {
  width: 178px;
  margin-top: 20px;
  word-wrap: break-word;
}
.card-population {
  margin-top: 15px;
}
.card-population-total {
  float: left;
}
.card-population-had {
  margin-left: 15px;
  float: left;
  color: #0066ff;
}
.card-population-number {
  display: block;
  margin-top: 5px;
  font-size: 24px;
  font-weight: 700;
}
</style>
